<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- <h1 v-if="add===0"></h1> -->
        <h1 v-if="add===10">{{a}}</h1>
        <button @click="add1">点击</button>
    </div>
    <div style="margin-top: 40px;" id="app2">
        <div v-if="c%2 !==0">{{b}}</div>
        <button @click="cut">切换</button>
    </div>
    <div style="display: flex;align-items: center;justify-content: space-evenly;" id="app3">
        <button @click="reduce" v-if="d > 1">-</button>
        <button v-else-if="d==1" disabled>-</button>
        <h1>{{d}}</h1>
        <button @click="increase" v-if="d < 5">+</button>
        <button v-else-if="d==5" disabled>+</button>
    </div>

</body>
<script src="./vue.js"></script>
<script>
    const { createApp, ref } = Vue;
    createApp({
        setup() {
            let add = ref(0);
            let a = 1
            function add1() {
                add.value++
            }
            return {
                a,
                add,
                add1
            }
        }
    }).mount('#app')
    createApp({
        setup() {
            let b = ref("显示")
            let c = ref(1)
            function cut() {
                c.value++
            }
            return {
                b,
                c,
                cut
            }
        }
    }).mount('#app2')
    createApp({
        setup() {
            let d = ref(1)
            function increase() {
                d.value++
            }
            function reduce() {
                d.value--
            }
            return {
                reduce,
                d,
                increase
            }
        }
    }).mount('#app3')
</script>

</html>